<style>
    #obj-update {
        padding: 20px 25px 25px 0;
    }

    #obj-update .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="obj-update">
    <form class="layui-form" action="" lay-filter="obj-update-form">
        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">记录id：</label>
            <div class="layui-input-block">
                <input type="text" name="id" data-th-value="${obj.id}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">层级：</label>
            <div class="layui-input-block">
                <select id="level" name="level"  >
                    <option value=""></option>
                    <option value="1">1级</option>
                    <option value="2">2级</option>
                    <option value="3">3级</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下级页面类型：</label>
            <div class="layui-input-block">
                <select id="pageType" name="pageType"  >
                    <option value=""></option>
                    <option value="1">页面</option>
                    <option value="2">模块</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">说明：</label>
            <div class="layui-input-block">
                <input type="text" name="descript" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上一页：</label>
            <div class="layui-input-block">
                <select id="previousPageId" name="previousPageId"  >
                    <option value=""></option>
                    <option th:each="page : ${pageList}" th:value="${page.id}" th:text="${page.title }">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下一页：</label>
            <div class="layui-input-block">
                <select id="nextPageId" name="nextPageId"  >
                    <option value=""></option>
                    <option th:each="page : ${pageList}" th:value="${page.id}" th:text="${page.title }">
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">父页面：</label>
            <div class="layui-input-block">
                <select id="pId" name="pId"  >
                    <option value=""></option>
                    <option th:each="page : ${pageList}" th:value="${page.id}" th:text="${page.title }">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否有上一页：</label>
            <div class="layui-input-block">
                <input type="text" name="havePreviousPage" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否有下一页：</label>
            <div class="layui-input-block">
                <input type="text" name="haveNextPage" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">首页：</label>
            <div class="layui-input-block">
                <input type="text" name="firstPageId" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">末页：</label>
            <div class="layui-input-block">
                <input type="text" name="lastPageId" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">html内容：</label>
            <div class="layui-input-block" style="z-index:99999999">
                <textarea id="layeditDemo"></textarea>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="obj-update-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect','layedit'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            layedit = layui.layedit,
            form = layui.form,
            obj = [[${obj}]],
            $view = $('#obj-update'),
            validate = layui.validate;

        form.verify(validate);
        form.render();
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: ctx+'tFile/fileUpload',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: 1024 * 1000,
                data: {
                    name: "测试参数",
                    age: 99
                }
                , done: function (data) {
                    console.log(data);
                }
            }
            , calldel: {
                url: 'your url',
                done: function (data) {
                    console.log(data);
                }
            }
            , rightBtn: {
                type: "layBtn",//default|layBtn|custom  浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
                customEvent: function (targetName, event) {
                    //根据tagName分类型设置
                    switch (targetName) {
                        case "img":
                            alert("this is img");
                            break;
                        default:
                            alert("hello world");
                            break;
                    };
                    //或者直接统一设定
                    //alert("all in one");
                }
            }
            //测试参数
            , backDelImg: true
            //开发者模式 --默认为false
            , devmode: true
            //是否自动同步到textarea
            , autoSync: true
            //内容改变监听事件
            , onchange: function (content) {
                console.log(content);
            }
            //插入代码设置 --hide:false 等同于不配置codeConfig
            , codeConfig: {
                hide: true,  //是否隐藏编码语言选择框
                default: 'javascript', //hide为true时的默认语言格式
                encode: true //是否转义
                , class: 'layui-code' //默认样式
            }
            //新增iframe外置样式和js
            , quote: {
                style: ['Content/css.css'],
                //js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
            }
            //自定义样式-暂只支持video添加
            //, customTheme: {
            //    video: {
            //        title: ['原版', 'custom_1', 'custom_2']
            //        , content: ['', 'theme1', 'theme2']
            //        , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
            //    }
            //}
            //插入自定义链接
            , customlink: {
                title: '插入layui官网'
                , href: 'https://www.layui.com'
                , onmouseup: ''
            }
            , facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
            , devmode: true
            , videoAttr: ' preload="none" '
            //预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
            //默认为 offset:['r'],area:['50%','100%']
            //, previewAttr: {
            //    offset: 'r'
            //    ,area:['50%','100%']
            //}
            , tool: [
                'html', 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'removeformat', 'fontFomatt', 'fontfamily', 'fontSize', 'fontBackColor', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink',  'image_alt', '|'
                , 'table', 'customlink'
                , 'fullScreen', 'preview'
            ]
            , height: '500px'
        });
        var ieditor = layedit.build('layeditDemo');
        initobjValue();


        function initobjValue() {
            layedit.setContent(ieditor,obj.content);
            form.val("obj-update-form", {
                "id": obj.id,
                "content": obj.content,
                "title": obj.title,
                "descript": obj.descript,
                "pId": obj.pId,
                "havePreviousPage": obj.havePreviousPage,
                "haveNextPage": obj.haveNextPage,
                "previousPageId": obj.previousPageId,
                "nextPageId": obj.nextPageId,
                "firstPageId": obj.firstPageId,
                "lastPageId": obj.lastPageId,
                "level": obj.level,
                "pageType": obj.pageType,
            });
        }

        form.on('submit(obj-update-form-submit)', function (data) {
            if (febs.nativeEqual(data.field, obj)) {
                febs.alert.warn('数据未作任何修改！');
                return false;
            }
            data.field.content=layedit.getContent(ieditor);
            febs.post(ctx + 'tPage/update', data.field, function () {
                layer.closeAll();
                febs.alert.success('数据修改成功');
                $('#febs-obj').find('#query').click();
            });
            return false;
        });
    });
</script>